<template>
  <div class="container">
    <!-- 轮播图 -->
    <header>
      <!-- <img src="images/banner4.png"> -->
      <!-- <img src="images/banner4.png"> -->

      <div>
        <swiper :options="swiperOption" v-if="albumList.length">
          <swiper-slide v-for="(val,key) in albumList" :key="key">
            <img :src="val.imgPath" />
          </swiper-slide>
        </swiper>
        <div class="clear"></div>
      </div>
      <!-- 悬浮按钮 -->
      <a class="down" href="javascript:window.history.back()">
        <span class="icon">&#xe63f;</span>
      </a>
      <a class="collection" href="#">
        <span class="icon">&#xe639;</span>
      </a>
      <a class="share" href="#">
        <span class="icon">&#xe607;</span>
      </a>

      <p class="num">
        <swiper :options="swiperOption" v-if="albumList.length">
          <swiper-slide v-for="(val,key) in albumList" :key="key">{{key+1}}/{{albumList.length}}</swiper-slide>
        </swiper>
      </p>
      <div class="clear" />
    </header>
    <!-- 房源信息 -->
    <div class="top">
      <h1>{{houseInfo.name}}</h1>
      <h3>{{houseInfo.desc}}</h3>
      <p>
        <span>{{houseInfo.rentMoney}}</span>
        <span>元/月</span>
        <span>服务费:{{houseInfo.serviceFee}}元</span>
      </p>
    </div>
    <section class="content">
      <h1>基本信息</h1>
      <div class="info">
        <dl>
          <dt>入住</dt>
          <dd>{{houseInfo.baseInfo.live}}</dd>
          <dt>面积</dt>
          <dd>{{houseInfo.baseInfo.area}}</dd>
          <dt>户型</dt>
          <dd>{{houseInfo.baseInfo.model}}</dd>
          <dt>发布</dt>
          <dd>{{houseInfo.baseInfo.pubtime}}</dd>
          <dt>楼层</dt>
          <dd>{{houseInfo.baseInfo.floor}}</dd>
          <dt>装修</dt>
          <dd>{{houseInfo.baseInfo.decorate}}</dd>
          <dt>车位</dt>
          <dd>{{houseInfo.baseInfo.stall}}</dd>
          <dt>付款</dt>
          <dd>{{houseInfo.baseInfo.payment}}</dd>
          <dt>小区</dt>
          <dd>{{houseInfo.baseInfo.plot}}</dd>
        </dl>
        <p>
          <a href="#">查看小区</a>
        </p>
      </div>
      <h1>配套设施</h1>
      <ul class="facilities">
        <li :class="houseInfo.facility.bed==='false'?'none':''">
          <span class="icon">&#xe60c;</span>
          <p>床</p>
        </li>
        <li :class="houseInfo.facility.washer==='false'?'none':''">
          <span class="icon">&#xec78;</span>
          <p>洗衣机</p>
        </li>
        <li :class="houseInfo.facility.refrigerator==='false'?'none':''">
          <span class="icon">&#xe90b;</span>
          <p>冰箱</p>
        </li>
        <li :class="houseInfo.facility.conditioner==='false'?'none':''">
          <span class="icon">&#xe60e;</span>
          <p>空调</p>
        </li>
        <li :class="houseInfo.facility.wifi==='false'?'none':''">
          <span class="icon">&#xe6a4;</span>
          <p>wifi</p>
        </li>
        <li :class="houseInfo.facility.sofa==='false'?'none':''">
          <span class="icon">&#xe724;</span>
          <p>沙发</p>
        </li>
        <li :class="houseInfo.facility.tablesChair==='false'?'none':''">
          <span class="icon">&#xe666;</span>
          <p>桌椅</p>
        </li>
        <li :class="houseInfo.facility.tv==='false'?'none':''">
          <span class="icon">&#xe67d;</span>
          <p>电视</p>
        </li>
        <li :class="houseInfo.facility.calorifier==='false'?'none':''">
          <span class="icon">&#xe67f;</span>
          <p>热水器</p>
        </li>
        <li :class="houseInfo.facility.cook==='false'?'none':''">
          <span class="icon">&#xe60d;</span>
          <p>可做饭</p>
        </li>
        <li :class="houseInfo.facility.heating==='false'?'none':''">
          <span class="icon">&#xe90d;</span>
          <p>暖气</p>
        </li>
        <li :class="houseInfo.facility.balcony==='false'?'none':''">
          <span class="icon">&#xe622;</span>
          <p>阳台</p>
        </li>
      </ul>
      <h1>附近位置</h1>
      <!-- <img src="images/4.jpg"> -->
      <!-- <div class="map" id="allmap" style="width: 100%;height: 3.29rem;overflow: hidden;margin:0"></div> -->
      <baidu-map
        class="map-container"
        v-bind="mapOptions"
        @ready="mapReady"
        @load="mapLoad"
        style="width: 100%;height: 3.29rem;overflow: hidden;margin:0"
      >
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT" />
        <bm-map-type
          :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
          anchor="BMAP_ANCHOR_TOP_LEFT"
        />
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
      </baidu-map>
      <h1>附近房源</h1>
      <ul class="case">
        <li v-for="(val,index) in nearbyHouse" :key="index">
          <router-link :to="{name:'detail',params:{hid:val.hid}}">
            <a href="javascript:;">
              <img :src="val.cover" class="fl" />
              <div class="text fr">
                <h1>{{val.name}}</h1>
                <p>{{val.desc}}</p>
                <ul>
                  <li
                    v-for="(v,k) in val.tag"
                    :key="k"
                    :class="v.status==='active'?'active':''"
                  >{{v.name}}</li>
                </ul>
                <p>
                  {{val.rentMoney}}
                  <span>元/月</span>
                </p>
              </div>
            </a>
          </router-link>
        </li>
      </ul>
      <p
        style="text-align:center; margin-bottom: 2rem;font-size: .4rem;"
        @click="getMore"
      >{{loadMore}}</p>
    </section>
    <footer>
      <div class="left">
        <img class="fl" src="images/touxiang.png" alt />
        <p class="fl">包图君</p>
        <span>个人</span>
      </div>
      <div class="phone">
        <a href="tel:18888888888" style="color: #fff;">电话咨询</a>
      </div>
      <div class="right">
        <router-link :to="{name:'appoint',params:{hid:'houseInfo.hid}'}}">
          <a href="javascript:;" style="color: #fff;">立即预约</a>
        </router-link>
      </div>
      <div class="clear"></div>
    </footer>
  </div>
</template>

<script type="text/ecmascript-6">
import $ from "jquery";
import {
  BaiduMap,
  BmScale,
  BmMapType,
  BmNavigation,
} from "vue-baidu-map/components";
export default {
  // 组件名称
  name: "detail",
  // 加载子组件（页面分离的内容）
  components: {
    BaiduMap,
    BmScale,
    BmMapType,
    BmNavigation,
  },
  data() {
    return {
      // 定义变量
      swiperOption: {
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        }, //l轮播间隔时间
        loop: true, //是否自动轮播
        pagination: {
          el: ".swiper-pagination",
        }, //轮播图中下标点显示
        paginationClickable: true, //轮播图中下标点显示
      },
      // 广告图数据
      bestHouse: [],
      albumList: [],
      lbIndex: 1, //轮播图索引
      house: {},
      loadMore: "加载更多",
      pn: 1, //页码
      mapOptions: {
        ak: "9N7pUjbkmkI4X5HdwGZqzTBYuaKvnV7z",
        center: "广州",
        scrollWheelZoom: true,
      },
    };
  },
  // 生命周期
  mounted() {
    this.init();
    // 组件加载渲染前就会执行
    this.$axios({
      method: "get",
      url: "/data/house_data.json",
    })
      .then((res) => {
        // 请求成功
        let data = res.data;
        // 给data的变量赋值
        if (data.code == 200) {
          this.albumList = data.bestHouse[0].albumList;
        }
      })
      .catch((error) => {
        // 错误（网络中断、请求地址有问题）
        console.log(error);
      });
    let hid = this.$route.params.hid;
    let type = this.$route.params.type;
    this.$store.dispatch("getOneHouse", { hid, type });
    this.$store.dispatch("getnearbyHouse", this.pn);
  },
  methods: {
    init() {
      // 把页面滚动条定位到最顶部
      $(window).scrollTop(0);
    },
    // 事件的函数
    getMore() {
      // 做分页，加载列表更多数据（去调用中间件的getHouse方法）
      let arr = this.$store.state.detail.nearbyHouse;
      let total = this.$store.state.detail.max_len;
      if (arr.length >= total) {
        return; // 阻止执行
      }
      this.$store.dispatch("getnearbyHouse", ++this.pn);
    },
    // 百度地图
    mapReady(e) {
      // console.log("map ready");
      console.log("地图准备好了" + e);
      // let map = e.currentTarget;
    },
    mapLoad(e) {
      // console.log("map load");
      console.log("地图加载" + e);
      // let BMap = e.BMap;
      // let map = e.map;
    },

    //获取轮播图索引
    getIndex(index) {
      // this.alIndex = index + 1
      console.log(index);
    },
  },
  computed: {
    nearbyHouse() {
      // 定义baseHouse变量
      console.log(this.$store.state.index.bestHouse);
      return this.$store.state.detail.nearbyHouse;
    },
    // 定义变量
    houseInfo() {
      if (this.$store.state.detail.idHouse.baseInfo === undefined) {
        // console.log("获取houseinfo失败");
        return {
          baseInfo: {}, // 二级json对象，需要赋空值
          facility: {},
          albumList: [],
        };
      } else {
        console.log(
          "idHouse:",
          JSON.stringify(this.$store.state.detail.idHouse)
        );
        return this.$store.state.detail.idHouse;
        // return null;
      }
    },

    alIndex() {
      return this.lbIndex;
      // console.log(this.alIndex)
    },
  },
  watch: {
    nearbyHouse() {
      let arr = this.$store.state.detail.nearbyHouse;
      let total = this.$store.state.detail.max_len;
      if (arr.length >= total) {
        this.loadMore = "我是底线的";
      }
    },
    alIndex() {
      this.index = this.alIndex;
      console.log(this.alIndex);
    },
  },
  destroyed() {
    // 推荐房源，数据还原，清空
    this.$store.commit("setnearbyHouse");
  },
};
</script>

<style scoped lang="less" rel="stylesheet/less">
header {
  position: relative;
  width: 100%;
  height: auto;
}

header img {
  width: 100%;
  height: auto;
  display: block;
}

header a {
  width: 0.64rem;
  height: 0.64rem;
  display: block;
  background-color: rgba(0, 0, 0, 0.2);
  text-align: center;
  line-height: 0.64rem;
  text-align: center;
  border-radius: 50%;
  font-size: 0.36rem;
  color: #fff;
  top: 0.35rem;
  position: absolute;
  z-index: 2;
}

header .down {
  left: 0.4rem;
}

header .collection {
  right: 1.12rem;
}

header .share {
  right: 0.37rem;
}

header .num {
  width: 0.89rem;
  height: 0.46rem;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 0.23rem;
  position: absolute;
  right: 0.39rem;
  bottom: 0.52rem;
  text-align: center;
  font-size: 0.3rem;
  line-height: 0.6rem;
  color: #fff;
  z-index: 2;
}
.swiper-pagination-fraction {
  left: initial;
}

.top {
  margin: 0.39rem;
  box-sizing: border-box;
  padding: 0.38rem 0.38rem 0;
  -moz-box-shadow: 0 0 10px #ccc;
  -webkit-box-shadow: 0 0 10px #ccc;
  box-shadow: 0 0 10px #ccc;
}

.top h1 {
  font-size: 0.4rem;
}

.top h3 {
  color: #adada9;
  font-size: 0.28rem;
}

.top p {
  margin-top: 0.2rem;
  font-size: 0.3rem;
}

.top p span:nth-child(1) {
  font-size: 0.5rem;
  color: #ff2023;
  font-weight: 600;
}

.top p span:nth-child(2) {
  color: #ff2023;
}

.top p span:nth-child(3) {
  color: #aeaeab;
  float: right;
  position: relative;
  top: 0.1rem;
}

.content {
  margin: 0 0.24rem;
  margin-bottom: 1.25rem;
}

.content .info {
  position: relative;
}

.content > h1 {
  font-size: 0.4rem;
  margin: 0.4rem 0 0.2rem;
}

.content dl {
  font-size: 0.28rem;
  line-height: 0.58rem;
}

.content dl dt {
  width: 15%;
  float: left;
  color: #adadad;
}

.content dl dd {
  width: 35%;
  float: left;
  color: #4a4a4a;
}

.content dl::after {
  display: block;
  content: "";
  clear: both;
}

.content .info p > a {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #ff2023;
  font-size: 0.3rem;
}

.content .facilities li {
  float: left;
  width: 20%;
  text-align: center;
  margin-bottom: 0.15rem;
}

.content .facilities li span {
  font-size: 0.45rem;
  line-height: 0.5rem;
  color: #000;
  display: block;
}

.content .facilities {
  margin-top: 0.2rem;
}

.content .facilities li p {
  font-size: 0.26rem;
}

.content .facilities li.none span {
  color: #ccc !important;
}

.content .facilities li.none p {
  color: #ccc;
  text-decoration: line-through;
}

.content .facilities::after {
  display: block;
  clear: both;
  content: "";
}

.content img {
  width: 100%;
  display: block;
}

footer {
  border-top: 0.01rem solid #d8d6d6;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 7.5rem;
  height: 1.2rem;
}

footer > div {
  width: 33.33333%;
  float: left;
  height: 100%;
}

footer .left {
  position: relative;
}

footer .left p {
  font-size: 0.28rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.25rem;
  margin-left: 0.2rem;
}

footer .left span {
  font-size: 0.24rem;
  color: #b8b8b8;
  position: absolute;
  top: 0.6rem;
  left: 1.1rem;
}

footer .left img {
  width: 0.62rem;
  height: 0.62rem;
  margin-top: 0.25rem;
  margin-left: 0.3rem;
}

footer .phone {
  background-color: #000;
  color: #fff;
  font-size: 0.34rem;
  line-height: 1.3rem;
  text-align: center;
}

footer .right {
  background-color: #ff3b3d;
  color: #fff;
  font-size: 0.34rem;
  line-height: 1.3rem;
  text-align: center;
}

footer a {
  width: 100%;
  height: 100%;
  display: block;
}
</style>